<template>
    <a-card :bordered="false" class="mb-2">
        <a-form ref="searchFormRef" name="advanced_search" :model="searchFormState" class="ant-advanced-search-form">
            <a-row :gutter="24">

                <a-col :span="6">
                    <a-form-item label="报销人" name="name">
                        <a-input v-model:value="searchFormState.name" placeholder="请输入报销人" />
                    </a-form-item>
                </a-col>
                <a-col :span="6">
                    <a-form-item label="项目编号" name="code">
                        <a-input v-model:value="searchFormState.code" placeholder="请输入项目编号" />
                    </a-form-item>
                </a-col>


                <a-col :span="6">
                    <a-form-item label="单据类别" name="documentType">
                        <a-select :getPopupContainer="trigger => trigger.parentNode" ref="select" v-model:value="searchFormState.documentType"
                            :options="documentTypes"></a-select>
                    </a-form-item>
                </a-col>
                <a-col :span="6">
                    <a-button type="primary" @click="tableRef.refresh(true)">查询</a-button>
                    <a-button class="ml-2" @click="reset">重置</a-button>

                </a-col>
            </a-row>
        </a-form></a-card> <a-card :bordered="false">
        <s-table ref="tableRef" :scroll="{ x: 1000, }"
            :tool-config="{ refresh: true, height: true, columnSetting: true, striped: false }" bordered
            :data="loadData" :columns="columns" :pagination="false" class="mb-2">

            <template #operator class="table-operator">
                <div style="display: flex; justify-content: space-between">
                    <a-select :getPopupContainer="trigger => trigger.parentNode" v-model:value="searchFormState.role" style="width: 120px" :options="roles"
                        :fieldNames="{ label: 'label', value: 'value' }" placeholder="本人">
                    </a-select>
                    <a-space>
                        <a-button class="ml-2" @click="visible = true"> <template #icon>
                                <plus-outlined />
                            </template>导入数据</a-button>
                        <a-button class="ml-2" @click="exportFile">
                            <template #icon>
                                <DownloadOutlined />
                            </template>
                            导出模板
                        </a-button>



                    </a-space>
                </div>
            </template>
            <template #bodyCell="{ column, record, index }">
                <template v-if="column.key === 'index'">
                    {{ index + 1 }}
                </template>

                <template v-if="column.key === 'month'">
                    {{ record.reimburseDate }}
                </template>
                <template v-if="column.key === 'control'">
                    <a>查看</a>
                </template>
            </template>
        </s-table>
    </a-card>
    <a-drawer v-model:visible="visible" :width="600" :title="'导入数据'" placement="right" :style="{ position: 'absolute' }"
        :footer-style="{ textAlign: 'right' }">


        <a-form :model="form" ref="formRef" name="basic" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }"
            autocomplete="off">


            <a-form-item label="项目名称" name="proName">
                <a-input v-model:value="form.proName" @click="onSearch" style="width: 100%" placeholder="请输入项目名称" />
            </a-form-item>
            <a-form-item label="上传文件" name="file">
                <div v-if="form.proId">
                    <a-upload :customRequest="handleUpload">
                        <a-button>上传文件</a-button>
                    </a-upload>
                </div>
                <div v-else>

                    <a-input disabled placeholder="请选择项目" />
                </div>
            </a-form-item>

        </a-form>
        <template #footer>
            <a-button style="margin-right: 8px" @click="visible = false">关闭</a-button>
        </template>
    </a-drawer>
    <projectSelection ref="proSelect" @onClose="prSelectOk" :value="searchFormState.proId" />
</template>

<script setup name="other">
import sysConfig from '@/config/index'
import api from '@/api/pm/cost/other'
import { auditStatusOptions, roles, documentTypes } from '@/utils/constants.js'
import tool from '@/utils/tool'
import projectSelection from '@/components/pm/projectSelection.vue'
const visible = ref(false)
const form = ref({})
const tableRef = ref()
const searchFormState = ref({

})

const proSelect = ref()
const onSearch = () => {
    proSelect.value.show()
}

const prSelectOk = (selectedRowKeys, selectRecords) => {
    form.value.proId = selectRecords[0].id
    form.value.proName = selectRecords[0].name
}
const token = tool.data.get('TOKEN')
const handleUpload = ({ file, onSuccess }) => {
    const formData = new FormData();
    formData.append('proId', form.value.proId);
    formData.append('file', file);
    api.import(formData)
        .then(() => {

        })
        .finally(() => {
        })
}

const exportFile = () => {
    fetch(sysConfig.API_URL + '/api/bizapp/biz/procostother/export', {
        method: 'GET',
        headers: new Headers({
            'token': token,
        }),
    })
        .then(res => res.blob())
        .then(data => {
            const blobUrl = window.URL.createObjectURL(data);
            download(blobUrl);
        });
}
const download = (blobUrl) => {
    const a = document.createElement('a');
    a.download = '下载后文件名' + '.csv';
    a.href = blobUrl;
    a.click();
}
const columns = [
    {
        title: '序号',
        dataIndex: 'index',
        key: 'index',
        width: 80,
        align: "center",
    },
    {
        title: '月份',
        dataIndex: 'month',
        key: 'month',
        width: 120,
        align: "center",
    },
    {
        title: '报销单日期',
        dataIndex: 'reimburseDate',
        key: 'reimburseDate',
        width: 120,
        align: "center",
    }, {
        title: '费用科目',
        dataIndex: 'subject',
        key: 'subject',
        width: 120,
        align: "center",
    },
    {
        title: '项目编号',
        dataIndex: 'code',
        key: 'code',
        width: 120,
        align: "center",
    },
    {
        title: '项目名称',
        dataIndex: 'name',
        key: 'name',
        width: 120,
        align: "center",
    },

    {
        title: '金额',
        dataIndex: 'money',
        key: 'money',
        width: 120,
        align: "center",
    },
    {
        title: '报销人',
        dataIndex: 'reimburseUser',
        key: 'reimburseUser',
        width: 120,
        align: "center",
    },

    {
        title: '事由',
        dataIndex: 'reason',
        key: 'reason',
        width: 120,
        align: "center",
    },
    {
        title: '单据类别',
        dataIndex: 'documentType',
        key: 'documentType',
        width: 120,
        align: "center",
    },
    // {
    //     title: '操作',
    //     dataIndex: 'control',
    //     key: 'control',
    //     width: 120,
    //     align: "center",
    //     fixed: "right"
    // },
]
const reset = () => {
    searchFormState.value = {}
}
const loadData = (parameter) => {
    // searchFormState.value.current = parameter.current
    // searchFormState.value.size = parameter.size
    return api.page(parameter).then((res) => {

        return res
    })
}
</script>
<style scoped></style>
